<include file="Public:header" />

<div id="page-body" style="border-top:1px dotted #cccccc;">
    <!-- announcement -->
    <div id="qan-announcements">
        <include file="Index:announcement" />
    </div>
    
    <div id="qan-content">
        <div id="qan-questions">
            <div class="qan-content-heading">
                <h2>{$Think.lang.headline1}</h2>
                <ul id="status-nav" class="tabs">
                    <li id="tab-recent" class="current"><a href="javascript:void(0)">{$Think.lang.status_recent}</a></li>
                    <li id="tab-popular"><a href="javascript:void(0)">{$Think.lang.status_popular}</a></li>
                    <li id="tab-reward"><a href="javascript:void(0)">{$Think.lang.status_reward}</a></li>
                    <li id="tab-urgent"><a href="javascript:void(0)">{$Think.lang.status_urgent}</a></li>
                    <notempty name="_user.user_id">
                    <li id="tab-network"><a href="javascript:void(0)">{$Think.lang.status_from_network}</a></li>
                    </notempty>
                </ul>
            </div>
            <div id="tabbed-questions">
                <div class="loading">loading...</div>
                <ul id="recent-questions" class="questions">
                    <volist name="questions" id="vo" mod="2">
                    <li class="item <eq name="mod" value="0">alt</eq>">
                        <div class="avatar"><a href="{$vo.user_id|format_user_url=$vo['username']}"><img src="{$vo.email|get_avatar}" alt="{$vo.username}" /></a></div>
                        <div class="info">
                            <h3><a href="{$vo.question_id|format_question_url=$vo['title']}">{$vo.title|Input::forShow}</a></h3>
                            <ul class="meta">
                                <li class="stars"><a href="#nogo"><span class="star-count has-stars">{$vo.star_count}</span><span class="star">Stars</span></a></li>
                                <li>{$Think.lang.asked_by} <a href="{$vo.user_id|format_user_url=$vo['username']}">{$vo.username}</a> - </li>
                                <li>{$Think.lang.in} <a href="{$vo.category_id|format_category_url}">{$vo.category_id|get_category_name}</a> - </li>
                                <li>{$vo.answer_count} {$Think.lang.answer_count} - </li>
                                <li><abbr title="{$vo.create_time|format_date}">{$vo.create_time|pretty_date}</abbr></li>
                            </ul>
                        </div>
                    </li>
                    </volist>
                    <li class="more"><a class="btn" href="{:U('Category/index',array('status'=>'open'))}">{$Think.lang.more_open_questions}</a></li>
                </ul>
            </div>
        </div>
    </div>
    
    <div id="qan-sidebar">
        <!-- my status widget -->
        {:W('MyStatus', array('_user'=>$_user))}
        <!-- community stats widget -->
        {:W('CommunityStats')}
        <!-- sidebar top ad -->
        <div id="ad_home_sidebar_top">{ad:home_sidebar_top}</div>
        <!-- help tips widget -->
        {:W('HelpTips')}
        <!-- like this page -->
        <div id="qan-persistent-links" class="mod">
            <h2>{$Think.lang.user_like_page}</h2>
            <ul class="syndication-links">
                <li class="rss"><a href="{:U('Feed/category')}">{$Think.lang.rss}</a></li>
                <li class="invite"><a href="{:U('Invitation/inviteFriend',array('uid'=>$_user['user_id']))}">{$Think.lang.invite_friends}</a></li>
            </ul>
            <!-- add this widget -->
            {:W('AddThis')}
        </div>
        <!-- sidebar bottom ad -->
        <div id="ad_home_sidebar_bottom">{ad:home_sidebar_bottom}</div>
    </div>
</div>


<div id="online-container">
    <h2  onclick="onlineToggle(this)">{$Think.lang.online_users} <span class="stats"> - {$online.total_count} - {$online.registered_count}({$online.hidden_count}) - {$online.guest_count} - ({$online.explain})</span> <span id="online-toggle" class="expand">expand</span></h2>
    <dl id="online">
        <dt><a class="admin">{$Think.lang.online_admin}</a><a class="super-moderator">{$Think.lang.online_super_moderator}</a><a class="moderator">{$Think.lang.online_moderator}</a><a class="registered">{$Think.lang.online_registered}</a><a class="guest">{$Think.lang.online_guest}</a></dt>
        <dd>
            <ul class="users">
            <volist name="online.users" id="vo">
                <switch name="vo.user_group">
                    <case value="1"><li><a class="admin" href="{$vo.user_id|format_user_url=$vo['username']}">{$vo.username}</a></li></case>
                    <case value="2"><li><a class="super-moderator" href="{$vo.user_id|format_user_url=$vo['username']}">{$vo.username}</a></li></case>
                    <case value="3"><li><a class="moderator" href="{$vo.user_id|format_user_url=$vo['username']}">{$vo.username}</a></li></case>
                    <case value="6"><li><a class="guest">{$Think.lang.guest}</a></li></case>
                    <default /><li><a class="registered" href="{$vo.user_id|format_user_url=$vo['username']}">{$vo.username}</a></li>
                </switch>         
            </volist>
            </ul>
        </dd>
    </dl>
</div>

<include file="Public:footer" />

<script type="text/javascript">

$('#status-nav>li').click(function(){
    var type = $(this).attr('id').substring(4);
    loadTabbedQuestions(type);
    return false;
});

function loadTabbedQuestions(type){
    var url = APP + '/Ajax/loadTabbedQuestions/type/' + type;
    $('#status-nav>li').removeClass('current');
    $('#tab-'+type).addClass('current');
    if($('#'+type+'-questions').length < 1){
        $('#tabbed-questions>.loading').show();
        $.post(url,function(html){    
            $('#tabbed-questions>.loading').hide();
            $('#tabbed-questions').append(html);
        });
    }
    $('#tabbed-questions>ul').hide();
    $('#'+type+'-questions').show();
}

function onlineToggle(obj){
    $('#online').toggle();
    var flag = $('#online-toggle'); 
    if(flag.attr('class') == 'expand'){
        flag.attr('class','collapse');
    }else{
        flag.attr('class','expand');
    }
}
</script>
